<template>
  <div class="main">
    <header>
      <div class="text">
        <p>
          <span style="float: left" @click="go('LifeService')">←</span>
          <span>宜居储值卡</span>
          <span style="float: right">兑换</span>
        </p>
      </div>
      <div class="money">
        {{ value.restValue }}
      </div>
      <div class="rest">
        <p>当前余额</p>
      </div>
    </header>
    <div class="under">
      <ul>
        <li>
          <div>
            <p>￥100.00</p>
            <p>
              <span>赠送10元</span>
              <button style="position: absolute">购买</button>
            </p>
          </div>
        </li>
        <li>
          <div>
            <p>￥100.00</p>
            <p>
              <span>赠送100元</span>
              <button style="position: absolute">购买</button>
            </p>
          </div>
        </li>
        <li>
          <div>
            <p>￥300.00</p>
            <p>
              <span>赠送20元</span>
              <button style="position: absolute">购买</button>
            </p>
          </div>
        </li>
        <li>
          <div>
            <p>￥500.00</p>
            <p>
              <span>赠送40元</span>
              <button style="position: absolute">购买</button>
            </p>
          </div>
        </li>
        <li>
          <div>
            <p>￥1000.00</p>
            <p>
              <span>赠送100元</span>
              <button style="position: absolute">购买</button>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getUsers } from "../../../api/index";

export default {
  data() {
    return {
      total: "0.00",
      value: [],
    };
  },
  created() {
    this.getValue();
  },
  methods: {
    async getValue() {
      let {
        data: {
          data: { result },
        },
      } = await getUsers();
      console.log(result);

      this.value = result[0];
    },
    go(page) {
      this.$router.replace({ name: page });
    },
  },
};
</script>

<style scoped lang='less'>
.main {
  height: 100%;
  header {
    width: 100%;
    height: 500px;
    background-image: url("../../../assets/img/chongzhika.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 100%;
    overflow: hidden;
    .text {
      color: #fff;
      margin-top: 72px;
      p {
        margin-top: 0px;
        margin-bottom: 107px;
        span {
          &:nth-child(2) {
            font-size: 40px;
            display: inline-block;
            margin-left: 214px;
          }
          &:nth-child(3) {
            font-size: 40px;
          }
        }
      }
      padding-left: 20px;
      padding-right: 20px;
    }
  }
  .money {
    width: 300px;
    height: 100px;
    margin: auto;
    font-size: 100px;
    text-align: center;
    color: #fff;
  }
  .rest {
    font-size: 35oxpx;
    color: #fff;
    width: 200px;
    text-align: center;
    margin: 50px auto 127px auto;
  }
  .under {
    background: rgb(201, 201, 201);
    height: 100%;
    // width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    div {
      background: #fff;
      height: 148px;
      //   overflow: hidden;
      border-radius: 10px;
      border: 1px solid rgb(201, 201, 201);
      padding-left: 20px;
      padding-right: 20px;
      margin-bottom: 2px;
      p {
        &:nth-child(1) {
          margin-top: 43px;
          font-size: 40px;
          margin-bottom: 10px;
        }
        &:nth-child(2) {
          font-size: 20px;
          margin-bottom: 43px;
          margin-top: 0px;
          color: rgb(193, 193, 193);
          position: relative;
          button {
            width: 75px;
            height: 37px;
            background-color: rgb(64, 155, 255);
            font-size: 20px;
            border: none;
            border-radius: 5px;
            color: #fff;
            right: 20px;
            bottom: 20px;
          }
        }
      }
    }
  }
}
</style>